<template>
  <div>
    <van-nav-bar :title="$t('changeLang')"
                 left-arrow
                 @click-left="$router.back()" />
    <van-cell-group>
      <van-cell v-for="(item, index) in langs"
                :key="item"
                @click="changeFn(index)">
        <span>{{ item }}</span>
        <van-icon v-if="locale === index"
                  name="success"
                  color="@themeColor" />
      </van-cell>
    </van-cell-group>
  </div>
</template>

<script>
import { mapState, mapActions } from 'vuex'
export default {
  data () {
    return {
      langs: {
        zh: '中文',
        en: 'English',
        jp: '日本語',
        kr: '한국어'
      }
    }
  },
  computed: {
    ...mapState({
      locale: state => state.locale
    })
  },
  methods: {
    ...mapActions({
      setLang: 'setLang'
    }),
    changeFn (index) {
      this.$i18n.locale = index
      this.setLang(index)
      // location.pathname = '/'
    }
  }
}
</script>

<style scoped lang="less">
.van-cell__value {
  display: flex;align-items: center;justify-content: space-between;
}
</style>
